<template>
    <div class="body">
        <div class="left_top"></div>
        <div class="right_top"></div>
        <div class="left_bottom"></div>
        <div class="right_bottom"></div>

        <div class="chess_black" v-show="chessBlack"></div>
        <div class="chess_white" v-show="chessWhite"></div>
    </div>
</template>

<script>
    export default {
        name: "Grid",
        props:{
            index: Number,
            chessProps: String
        },
        data(){
            return{
                chessBlack: false,
                chessWhite: false
            }
        },
        methods:{
            updateData:function (isMe) {
                const chess = localStorage.getItem("chess")
                if (this.chessBlack === false && this.chessWhite === false){
                    if (isMe){
                        if (chess === 'b'){
                            this.chessBlack = true
                        } else {
                            this.chessWhite = true
                        }
                    } else {
                        if (chess === 'b'){
                            this.chessWhite = true
                        } else {
                            this.chessBlack = true
                        }
                    }

                }
            },

            clearAll:function () {
                this.chessWhite = false
                this.chessBlack = false
            }
        }
    }
</script>

<style scoped lang="scss">
    .body{
        width: 40px !important;
        height: 40px !important;

        margin: 0 !important;

        &:hover{
            background-color: rgba(146, 215, 192, 0.5);
            cursor: pointer;
        }

        .chess_black{
            position:relative;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            margin: auto auto;
            box-shadow:2px 2px 4px rgba(0,0,0,0.3);
            cursor:pointer;
            background: #333;
        }

        .chess_white{
            position:relative;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            margin: auto auto;
            box-shadow:2px 2px 4px rgba(0,0,0,0.3);
            cursor:pointer;
            background: #eeeeee;
        }

        .left_top{
            position: absolute;

            height: 20px;
            width: 20px;

            margin-top: 0;
            margin-left: 0;

            border-bottom: 1px solid;
            border-right: 1px solid;
        }

        .left_bottom{
            position: absolute;

            height: 20px;
            width: 20px;

            margin-left: 0;
            margin-top: 20px;

            border-top: 1px solid;
            border-right: 1px solid;
        }

        .right_bottom{
            position: absolute;

            height: 20px;
            width: 20px;

            margin-left: 20px;
            margin-top: 20px;

            border-top: 1px solid;
            border-left: 1px solid;
        }

        .right_top{
            position: absolute;

            height: 20px;
            width: 20px;

            margin-top: 0;
            margin-left: 20px;

            border-bottom: 1px solid;
            border-left: 1px solid;
        }
    }
</style>
